import React, { useState ,FC, useEffect} from 'react'
import Hello from './Hello'
import List from './List'
//可以把接口单独写道一个接口文件
import {propType,User,Phone} from "./Impl/AppImp"
// 文件后 js  jsx支持jsx语法的react文件
// 文件  implements
type Fun=(str:string)=>string;
// function App(props:any){
//FC 是Functional Component 函数组件 函数组件Props验证可以这么写
let App:FC<propType>=(props:propType)=>{
    let users:User[]=[
        {id:1,username:"老张",age:20},
        {id:2,username:"老谢",age:20},
        {id:3,username:"老王",age:40}
    ];
    // console.log(props);
    // let username=true;
    let username="老王";
    let [age,setAge]=useState<number>(20);//手动指定泛型为number类型
    let [iphone,setIphone]=useState<Phone>({
        price:1999,size:"Iphone"
    });
    
    useEffect(()=>{
        return ()=>{
            
        }
    },[]);
    let clickChange=(num:number):number=>{
        // setAge("hello");//推论出 age是number
        setAge(age+5);
        console.log("clickChange函数===>");
        return num;
    }
    return <>
        <h1>hello App</h1>
        <div>
            {
                users.map(t=>{
                    return <p key={t.id}>{t.username} 年龄:{(t.age as number)-2}</p>
                })
            }
        </div>
        <Hello age={age}  change={clickChange} username={username} msg="sayHello"></Hello>
        <List tododata={[{id:1,text:"学习ts",done:true}]}></List>
    </>
}
export default App;